<template>
  <view class="repairStatus">
    <view v-if='status==="success"'>
      <u--image :src="src" width="750rpx" height="200rpx"></u--image>
    </view>
    <view class="info">房屋信息</view>
    <view class="house">
      北京西三旗花园1号楼101
      <view class="right">
        <view :class="status">
          {{txt}}
        </view>
      </view>
    </view>
    <view class="info">报修信息</view>
    <view class="repair">
      <text>维修项目</text>
      <text>水暖</text>
    </view>
    <view class="repair">
      <text>手机号码</text>
      <text>18332566962</text>
    </view>
    <view class="repair">
      <text>预约日期</text>
      <text>2022/08/12</text>
    </view>
    <!--  -->
    <view class="question">
      <text>问题描述</text>
      <view class="questionDeatil">
        每天晚上7点到8点热水都很不稳定，时有时无。每天晚上7点到8点热水都很不稳定，时有时无。每天晚上7点到8点热水都很不稳定,时有时无。
      </view>
    </view>
    <!--  -->
    <view class="question" v-if='status==="waiting"'>
      <text>问题附件</text>
      <view class="questionDeatil">
        <u--image :showLoading="true" :src="src" width="70px" height="70px" @click="click"></u--image>
      </view>
    </view>
    <!--  -->
    <view class="question" v-if='status==="success"'>
      <text>问题附件</text>
      <view class="questionDeatil">
        <u--image :src="src" width="70px" height="70px"></u--image>
        <u--image :src="src" width="70px" height="70px"></u--image>
        <u--image :src="src" width="70px" height="70px"></u--image>
        <u--image :src="src" width="70px" height="70px"></u--image>
        <u--image :src="src" width="70px" height="70px"></u--image>
      </view>
    </view>
    <!--  -->
    <view class="btn" v-if='status==="waiting"'>
      <view class="btnRepair">
        修改信息
      </view>
      <view class="btnRepair2">
        取消报修
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        txt: '',
        status: "",
        src: 'https://cdn.uviewui.com/uview/album/1.jpg'
      }
    },
    methods: {

    },
    onLoad(options) {
      let params = JSON.parse(options.obj)
      this.txt = params.txt
      this.status = params.status
      console.log(params);
    },
  }
</script>

<style lang="scss" scoped>
  .repairStatus {
    background-color: #fafafa;
    height: 100%;
  }

  .btn {
    width: 750rpx;
    height: 113rpx;
    background-color: red;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;

    .btnRepair {
      width: 375rpx;
      height: 113rpx;
      color: #5591AF;
      font-family: PingFang SC;
      font-weight: regular;
      font-size: 15px;
      text-align: center;
      line-height: 113rpx;
    }

    .btnRepair2 {
      width: 375rpx;
      height: 113rpx;
      color: #686868;
      font-family: PingFang SC;
      font-weight: regular;
      font-size: 15px;
      text-align: center;
      line-height: 113rpx;
    }

  }

  .question {
    margin-top: 20rpx;
    width: 750rpx;
    height: 200rpx;
    background-color: #ffffff;
    color: #333333;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 14px;
    // line-height: 80rpx;
    padding-left: 25rpx;

    .questionDeatil {
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;

      .u-image {
        flex: 1
      }
    }
  }

  .house {
    position: relative;
    width: 750rpx;
    height: 80rpx;
    background-color: #ffffff;
    color: #333333;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 14px;
    line-height: 80rpx;
    letter-spacing: 0px;
    padding-left: 25rpx;
    // text-align: center;
  }

  .repair {
    position: relative;
    width: 750rpx;
    height: 80rpx;
    background-color: #ffffff;
    color: #333333;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 14px;
    line-height: 80rpx;
    letter-spacing: 0px;
    padding-left: 25rpx;

    text:nth-child(2) {
      margin-left: 70rpx;
    }
  }

  .info {
    color: #979797;
    font-weight: regular;
    font-size: 24rpx;
    padding: 30rpx 0 20rpx 30rpx;
    height: 20rpx;
    // background-color: pink;
    line-height: 20rpx;
  }

  .right {
    position: absolute;
    top: 18rpx;
    right: 40rpx;

    .success {
      width: 128rpx;
      height: 48rpx;
      color: #27AE60;
      border-radius: 10rpx;
      background: #EBF8F0;
      font-size: 24rpx;
      line-height: 48rpx;
      text-align: center;
    }

    .waiting {
      width: 128rpx;
      height: 48rpx;
      border-radius: 10rpx;
      background: #E5F0FB;
      text-align: center;
      line-height: 48rpx;
      font-size: 24rpx;
      color: #2D9CDB;
    }

    .finish {
      width: 128rpx;
      height: 48rpx;
      color: orange;
      border-radius: 10rpx;
      background: #FCF2ED;
      font-size: 24rpx;
      line-height: 48rpx;
      text-align: center;
    }

    .cancel {
      width: 128rpx;
      height: 48rpx;
      color: #ffff;
      border-radius: 10rpx;
      background: #b7b7b9;
      font-size: 24rpx;
      line-height: 48rpx;
      text-align: center;
    }
  }
</style>
